<template>
	<view class="calculatord-page bg-white" :style="my_style">
		<!-- 表单 -->
		<view class="form">
			<view class="txt-cell">在线报价结果仅供参考，实际审批结果请以金融服务机构为准。</view>
			<view class="cell-box flex first-item">
				<view>
					<view class="dnum">{{caldata.a}}</view>
					<view class="dtxt">预计每月收益(元)</view>
				</view>
				<view style="width: 4rpx; height: 40rpx; background: #E5F5F6; border-radius: 1rpx;"></view>
				<view>
					<view class="dnum">{{caldata.b}}</view>
					<view class="dtxt">每月躺赚(元)</view>
				</view>
			</view>
			<view class="cell-box2">
				<view class="cell2 float-left">
					<view class="cell2box">
					<input type="text" v-model="caldata.c" disabled="true" />
					<view class="label">预计月租金(元)</view>
					</view>
				</view>
				<view class="cell2 float-right">
					<view class="cell2box">
					<input type="text" v-model="caldata.d" disabled="true" />
					<view class="label">预计运营期内总回报(元)</view>
					</view>
				</view>
				<view class="clearfix"></view>
			</view>
			<view class="cell-box2">
				<view class="cell2 float-left">
					<view class="cell2box">
					<input type="text" v-model="caldata.e" disabled="true" />
					<view class="label">每月分期支出(元)</view>
					</view>
				</view>
				<view class="cell2 float-right">
					<view class="cell2box">
					<input type="text" v-model="caldata.f" disabled="true" />
					<view class="label">总投资(元)</view>
					</view>
				</view>
				<view class="clearfix"></view>
			</view>
			<view class="cell-box">
				<view class="cell flex">
					<view class="label">预计日租金(元)</view>
					<input type="text" v-model="caldata.g" disabled="true" />
				</view>
				<view class="cell flex">
					<view class="label">预计运营成本(元)</view>
					<input type="text" v-model="caldata.h" disabled="true" />
				</view>
				<view class="cell flex">
					<view class="label">预计保底收益(元)</view>
					<input type="text" v-model="caldata.i" disabled="true" />
				</view>
			</view>
			
			<view class="txt-cell">收益计算公式:</view>
			<view class="txt-cell">预计每月收益=预计保底收益+(预计月租金-预计保底收益-预计运营成本)*80%[保底超出部分收取20%运营分成]</view>
			<view class="txt-cell">每月躺赚=预计每月收益-每月分期支出</view>
		</view>
		<view class="footer">
			<view class="footer-primary-btn" @tap="jumpPage">重新计算</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "calculatord",
		data() {
			return {
				caldata:{
					a:"0",
					b:"0",
					c:"0",
					d:"0",
					e:"0",
					f:"0",
					g:"0",
					h:"0",
					i:"0"
				},
			}
		},
		onLoad(option) {
			//console.log(option);
			this.caldata.a = option.a;
			this.caldata.b = option.b;
			this.caldata.c = option.c;
			this.caldata.d = option.d;
			this.caldata.e = option.e;
			this.caldata.f = option.f;
			this.caldata.g = option.g;
			this.caldata.h = option.h;
			this.caldata.i = option.i;
		},
		methods: {

			jumpPage() {
				var url = "/pages/user/calculator";
				uni.$u.route(url)
			},
		}

	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.calculatord-page {
		height: 100%;
		padding: 70rpx 0 444rpx;
		.first-item{
			height: 182rpx; 
			text-align: center; 
			justify-content: space-around;
		}
		.dtxt{
			color: #FB2D19;
		}
		.dnum{
			font-weight: bold;
			font-size: 60rpx;
			color: #FB2D19;
		}
		.form {
			.txt-cell{
				width: 90%;
				margin: 0 auto 10px auto;
				font-size: 20rpx;
				color:#999999;
			}
			.cell-box{
				width: 90%;
				font-size: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 10rpx;
				padding:0 10px;
				margin: 0 auto 10px auto;
				position: relative;
				overflow: hidden;
			}
			.cell {
				width: 90%;
				height: 120rpx;
				font-size: 28rpx;
				background: #FFFFFF;
				padding:0 10px;
				margin: 0 auto 10px auto;
				position: relative;
				overflow: hidden;
				border-bottom: 2rpx solid #F2F2F2;
				color: #999999;
	
				input {
					flex: 1;
					text-align: right;
					font-size: 28rpx;
				}
			}
			.cell-box2{
				width: 95%;
				font-size: 28rpx;
				background: #FFFFFF;
				padding:0 10px;
				margin: 0 auto 10px auto;
				position: relative;
				.cell2{
					width: 49%;
					display: inline-block;
					text-align: center;
					box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
					border-radius: 10rpx;
					padding:40rpx 0;
					.label{ 
						margin-top:10rpx;
						color: #999999;
					}
				}
			}
			
		}

		.footer {
			// padding: 144rpx 24rpx 0;

			.footer-primary-btn {
				width: 690rpx;
				height: 88rpx;
				background-color: $b;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 49rpx;
				margin: 70rpx auto 0;
			}
		}
	}
</style>
